<template>
  <el-menu
      :collapse = "isCollapse"
      @close = "handleClose"
      @open = "handleOpen"
      default-active = "1"
  >
    <el-menu-item index = "0" title = "首页" style = "color: #f1f2f3">
      <user-icon icon = "home" class = "menu-icon"/>
      <template #title>
        <router-link :to = "{path:'/home'}">首页</router-link>
      </template>
    </el-menu-item>
    <template v-for = "data in leftMenuDatas">
      <el-sub-menu :index = "data.meta.menuId" v-if = "data.children?.length>0">
        <template #title>
          <user-icon :icon = "data.menuIcon" class = "menu-icon"/>
          <span>{{ data.meta.title }}</span>
        </template>
        <template v-for = "sdata in data.children">

          <el-sub-menu :index = "sdata.meta.menuId" v-if = "sdata.children?.length>0">
            <template #title>
              <user-icon :icon = "sdata.menuIcon" class = "menu-icon"/>
              <span>{{ sdata.meta.title }}</span>
            </template>
            <el-menu-item :index = "ssdata.meta.menuId" :title = "ssdata.meta.title"
                          v-for = "ssdata in  sdata.children">
              <user-icon :icon = "ssdata.menuIcon" class = "menu-icon"/>
              <template #title>
                <router-link :to = "{path:ssdata.path}">{{ ssdata.meta.title }}</router-link>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item :index = "sdata.meta.menuId" :title = "sdata.meta.title" v-else>
            <user-icon :icon = "sdata.menuIcon" class = "menu-icon"/>
            <template #title>
              <router-link :to = "{path:sdata.path}">{{ sdata.meta.title }}</router-link>
            </template>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item :index = "data.meta.menuId" :title = "data.meta.title" v-else>
        <user-icon :icon = "data.menuIcon" class = "menu-icon"/>
        <template #title>
          <router-link :to = "{path:data.path}">{{ data.meta.title }}</router-link>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>

export default {
  name: "AppLeft",
  props: ["leftMenuDatas", "isCollapse"],

  data() {
    return {}
  },
  setup() {
    // const isCollapse = ref(true)
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
      // isCollapse,
      handleOpen,
      handleClose,
    }
  },
  methods: {}
}
</script>

<style lang = "scss" scoped>

/deep/ .el-sub-menu__title {
  height: 40px;
  line-height: 40px;
}

.el-menu {
  min-height: 100%;

  .menu-icon {
    color: #409eff;
    font-size: 18px;
    vertical-align: middle;
    padding-right: 5px
  }


}
</style>